<template>
	<view class="flex bg-white flex-column">
		<!-- 头部 -->
		<view class="flex justify-center py-4" style="height: 100%">
			<view class="content bg-white">
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="旧密码验证" name="first">
						<el-form :rules="rules" ref="form" :model="form" label-width="130px">
							<el-form-item label="输入手机号" prop="username">
								<el-input v-model.trim="form.username" placeholder="请输入手机号"
									prefix-icon="el-icon-mobile-phone" class="input—x"></el-input>
							</el-form-item>
							<el-form-item label="输入旧密码" prop="oldpassword">
								<el-input show-password type="password" v-model.trim="form.oldpassword"
									placeholder="请输入旧密码" prefix-icon="el-icon-lock" class="input—x"></el-input>
							</el-form-item>
							<el-form-item label="输入新密码" prop="newpassword">
								<el-input show-password type="password" v-model.trim="form.newpassword"
									placeholder="请输入新密码" prefix-icon="el-icon-lock" class="input—x"></el-input>
							</el-form-item>
							<el-form-item label="再次输入新密码" prop="newagianpassword">
								<el-input show-password type="password" v-model.trim="form.newagianpassword"
									placeholder="请再次输入新密码" prefix-icon="el-icon-lock" class="input—x"></el-input>
							</el-form-item>
							<view class="flex" style="justify-content: space-around;">
								<el-button :loading="loading" type="success" @click="Update('form')">确认修改</el-button>
								<el-button type="danger" @click="Rest">重置信息</el-button>
							</view>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="手机号验证" name="second">
						<el-form :rules="rules" :model="form1" ref="form1" label-width="140px">
							<el-form-item label="输入手机号" prop="username">
								<el-input v-model.trim="form1.username" placeholder="请输入手机号"
									prefix-icon="el-icon-mobile-phone" class="input—x"></el-input>
							</el-form-item>
							<el-form-item label="输入验证码" prop="code">
								<el-input v-model.trim="form1.code" placeholder="请输入验证码"
									prefix-icon="el-icon-chat-dot-round" class="input—x"></el-input>
								<el-button v-if="time" @click="sendMessage()" type="primary">发送</el-button>
								<el-button v-else type="primary">{{secend}}</el-button>
							</el-form-item>
							<el-form-item label="输入新密码" prop="newpassword">
								<el-input show-password type="password" v-model.trim="form1.newpassword"
									placeholder="请输入新密码" prefix-icon="el-icon-lock" class="input—x"></el-input>
							</el-form-item>
							<el-form-item label="再次输入新密码" prop="newagianpassword">
								<el-input show-password type="password" v-model.trim="form1.newagianpassword"
									placeholder="请再次输入新密码" prefix-icon="el-icon-lock" class="input—x"></el-input>
							</el-form-item>
							<view class="flex" style="justify-content: space-around;">
								<el-button :loading="loading" type="success"
									@click="PhoneUpdate('form1')">确认修改</el-button>
								<el-button type="danger" @click="Rest">重置信息</el-button>
							</view>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import {
		Notification,
		Message
	} from "element-ui";
	import {
		getInquiryIDOriginal,
		getEditAction,
		RedisAdd,
		isPhoneCode
	} from "@/api/global.js";
	export default {
		components: {
			yHeader,
			yFooter,
		},
		data() {
			return {
				loading: false,
				timer: null,
				time: true,
				secend: 60,
				RandomCode: '',
				active: 0,
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				activeName: "first",
				form: {
					username: "", //15146557172
					oldpassword: "", //a123456
					url: "/pages/index/index",
					newpassword: '',
					newagianpassword: '',
					type: "true",
				},
				form1: {
					username: "", //15146557172
					url: "/pages/index/index",
					newpassword: '',
					newagianpassword: '',
					type: "true",
					code: '',
				},
				rules: {
					username: [{
							required: true,
							message: "请输入手机号",
							trigger: "blur"
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号码格式不正确',
							trigger: 'blur'
						}
					],
					oldpassword: [{
						required: true,
						message: "请输入旧密码",
						trigger: "blur"
					}, {
						validator: this.checkData,
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: "请输入短信验证码",
						trigger: "blur"
					}, {
						min: 6,
						message: '短信验证码为六位有效数字',
						trigger: 'blur'
					}],
					newpassword: [{
						required: true,
						message: "请输入新密码",
						trigger: "blur"
					},{
						validator: this.checkData,
						trigger: 'blur'
					}, {
						min: 6,
						max: 10,
						message: '密码长度应在 6 到 10 个字符',
						trigger: 'blur'
					}],
					newagianpassword: [{
							required: true,
							message: "请再次输入新密码",
							trigger: "blur"
						},
						{
							validator: this.checkData,
							trigger: 'blur'
						},
						{
							min: 6,
							max: 10,
							message: '密码长度应在 6 到 10 个字符',
							trigger: 'blur'
						}
					],
				},
				UserInfo: {},
				agree: true,
				back: false,
			};
		},
		mounted() {
			this.form.username = uni.getStorageSync("loginInfo").username || "";
			this.form1.username = uni.getStorageSync("loginInfo").use || "";
			console.log(parseInt(new Date().getTime()/1000)+300)
			console.log(parseInt(new Date().getTime()/1000))
		},
		methods: {
			Rest() {
				this.form.oldpassword = ''
				this.form.newpassword = ''
				this.form.newagianpassword = ''
				this.form1.newpassword = ''
				this.form1.newagianpassword = ''
			},
			checkData(rule, value, callback) {
				if (value) {
					if (/[\u4E00-\u9FA5]/g.test(value)) {
						callback(new Error('密码不能设置为中文!'))
					} else {
						callback()
					}
				}
				callback()
			},
			sendMessage() {
				if (this.form1.username == '') {
					Message.error("请先输入正确的手机号再点击发送");
					return
				}
				const reg = /^1[3-9]\d{9}$/
				if (!reg.test(this.form1.username)) {
					Message.error("请检查手机号格式是否正确!");
					return
				}
				this.time = false
				this.secend = 60
				this.secend--
				this.timer = setInterval(() => {
					if (this.secend == '01') {
						clearInterval(this.timer)
						this.time = true
						return
					}
					this.secend--
					if (this.secend < 10) {
						this.secend = '0' + this.secend
					}
				}, 1000)
				let code = '';
				for(let i=0;i<6;i++){
				    code += parseInt(Math.random()*10);
				}
				this.RandomCode = code
				uniCloud.callFunction({
					name: 'sendSms', //对应的云函数名
					data: {
						phone: this.form1.username,
						data: {
							name: '众菌联',
							code: this.RandomCode, //随机生成的验证码，如123456
							action: '注册', //校验类型为“注册”
							expMinute: '5', //短信的有效期，5分钟
						}
					}
				}).then(res => {
					if (res.success) {
						Message.success("短信已发送");
						this.RedisPush()
					}
				}).catch(msg => {
					Message.success("系统错误!请稍后重试");
				});
			},
			async RedisPush(){
				const res = await RedisAdd({
					data:{
						Key:'zjl_'+this.form1.username,
						Main:JSON.stringify({
							code:this.RandomCode,
							expires_in:parseInt(new Date().getTime()/1000)+300
						}),
						Expire:300,
					}
				})
				console.log(res)
			},
			async CheckCode(data){
				const res = await isPhoneCode({
					data
				})
				if(res.Status=='success'){
					let Data = {
						Data: JSON.stringify({
							Modify: {
								system_user_info: [this.UserInfo]
							}
						}),
						token: uni.getStorageSync('loginInfo').token,
					}
					this.getEdit(Data)
				}else{
					Message({
						type:'error',
						message:'短信验证码错误'
					})
				}
			},
			Update(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.form.oldpassword == this.form.newpassword) {
							Message({
								type: 'warning',
								message: '新密码不能与旧密码相同'
							})
							return
						}
						if (this.form.newpassword != this.form.newagianpassword) {
							Message({
								type: 'error',
								message: '两次输入的新密码不相同'
							})
							return
						}
						let data = {
							Primary_Key_Name: 'User_Number', //主键名
							Primary_Key: this.form.username, //主键值
							Data: 'system_user_info',
							token: uni.getStorageSync('loginInfo').token,
						}
						this.getOriginal(data)
					} else {
						Message({
							type: 'error',
							message: '请检查页面表单是否填写正确'
						})
						return false;
					}
				});
			},
			PhoneUpdate(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.RandomCode == '') {
							Message({
								type: 'error',
								message: '请点击发送获取短信验证码'
							})
							return
						}
						// if (this.form1.code != this.RandomCode) {
						// 	Message({
						// 		type: 'error',
						// 		message: '您输入的短信验证码有误'
						// 	})
						// 	return
						// }
						if (this.form1.newpassword != this.form1.newagianpassword) {
							Message({
								type: 'error',
								message: '两次输入的新密码不相同'
							})
							return
						}
						let data = {
							Primary_Key_Name: 'User_Number', //主键名
							Primary_Key: this.form1.username, //主键值
							Data: 'system_user_info',
							token: uni.getStorageSync('loginInfo').token,
						}
						this.getOriginal(data)
					} else {
						Message({
							type: 'error',
							message: '请检查页面表单是否填写正确'
						})
						return false;
					}
				});
			},
			async getOriginal(data) {
				const res = await getInquiryIDOriginal({
					data
				})
				if (this.activeName == 'first' && this.form.oldpassword != res[0].Pass_Ward) {
					Message({
						type: 'error',
						message: '您输入的旧密码有误!'
					})
					this.Rest()
					return
				}
				if (this.activeName == 'second' && this.form1.newpassword == res[0].Pass_Ward) {
					Message({
						type: 'error',
						message: '您输入的新密码与旧密码重复,请重新输入新密码'
					})
					this.Rest()
					return
				}
				this.loading = true
				if (this.activeName == 'first') {
					res[0].Pass_Ward = this.form.newpassword
					console.log(res[0]);
					let Data = {
						Data: JSON.stringify({
							Modify: {
								system_user_info: [res[0]]
							}
						}),
						token: uni.getStorageSync('loginInfo').token,
					}
					this.getEdit(Data)
				} else {
					res[0].Pass_Ward = this.form1.newpassword
					this.UserInfo = res[0]
					let Data = {
						Code:this.form1.code,
						Phone:this.form1.username
					}
					this.CheckCode(Data)
				}
			},
			handleClick(tab, event) {
				this.Rest()
				console.log(this.activeName)
			},
			async getEdit(data) {
				const res = await getEditAction({
					data
				})
				this.loading = false
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login?expire=1'
					})
				} else if (res.Status == 'success') {
					Message({
						type: 'success',
						message: '修改成功!即将返回登录页'
					})
					uni.removeStorageSync('loginInfo')
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 2000)
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.hover {
		cursor: pointer;
	}

	.hover :hover {
		text-decoration: underline;
	}

	.content {
		padding: 10px 30px 16px;
		width: 60%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.el-tabs {
			width: 100%;
			height: 100%;
		}

		.btn {
			width: 100%;
			margin-top: 40rpx;
			background-color: #28a745 !important;
		}

		.btn2 {
			width: 230rpx;
		}

		p {
			display: flex;
			margin: 20px 0;
			line-height: 17px;
			font-size: 12px;
			color: #646464;
			justify-content: space-between;

			text {
				cursor: pointer;
			}

			text:hover {
				color: #28a745;
			}
		}

		.foot {
			margin: 10px 0 0 0;

			.el-checkbox {
				margin: 0 5px 0 0;
			}

			font-size: 12px;
			color: #646464;
		}

		/deep/ .el-form-item__content {
			display: flex;
		}
	}
</style>